<template>
  <div>
    <div>
      <Header1>{{ itemObj.nm }}</Header1>
      <Header2></Header2>
    </div>

    <div class="bop">
      <div class="mask"></div>
      <div class="adiv">
        <img :src="itemObj.img" />
        <div class="ali">
          <ul>
            <li>{{ itemObj.nm }}</li>
            <li>{{ itemObj.enm }}</li>
            <li>
              <span>{{ itemObj.sc }}</span
              ><span>({{ itemObj.snum }}人评)</span>
            </li>
            <li>
              {{ itemObj.cat }}
              <div class="type-img"><span class="icon-bg"></span></div>
            </li>
            <li>{{ itemObj.src }}/{{ itemObj.dur }}分钟</li>
            <li>{{ itemObj.pubDesc }}</li>
          </ul>
        </div>
      </div>
      <div class="movie-detail-arrow">
        <span class="arrow-bg"></span>
      </div>
    </div>

    <van-tabs @click="getData">
      <van-tab
        v-for="(item, index) in reqi"
        :key="index"
        :title="item.date | format"
      >
      </van-tab>
    </van-tabs>

   <div class="item-title">
      <div class="tou">
        <div class="quancheng">全城 <span></span></div>
        <div class="quancheng">品牌 <span></span></div>
        <div class="quancheng">特色<span></span></div>
      </div>
    </div>

    <div v-for="(item, index) in itemlist" :key="index" class="c_item">
      <div class="cont" v-for="item in itemlist" :key="item.id">
        <div class="mb-line-b">
          <div class="middle">
            <div class="line-ellipsis">
              <span> {{ item.nm }}</span>
              <span class="price-block">
                <span class="price">{{ item.price }}</span>
                <span class="q">元起</span>
              </span>
            </div>
            <div class="box-flex">
              <div class="line-ellipsis">
                {{ item.addr }}
              </div>
            </div>
            <div class="flex"></div>
            <div class="label-block">
              <div class="endorse" v-for="item1 in item.labels" :key="item1.id">
                <span
                  :style="{
                    color: item1.color,
                    border: '1px solid' + item1.color,
                  }"
                  >{{ item1.name }}</span
                >
              </div>
            </div>

            <div
              class="discount-block"
              v-show="item.promotion.cardPromotionTag"
            >
              <div>
                <div class="card">
                  <img
                    src="//p1.meituan.net/scarlett/ff1c6e33ed0ac3cd862910a83d4bf959583.png"
                  />
                </div>
                <div class="discount-label-text">
                  {{ item.promotion.cardPromotionTag }}
                </div>
              </div>
            </div>

            <div class="showtime">
              <div class="discount-label-text2">
                近期场次:{{ item.showTimes }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

   
  </div>
</template>
<script>
import Header1 from "../components/common/Header1.vue";
import Header2 from "../components/common/Header2.vue";
import Vant from "vant";
import axios from "axios";
import Vue from "vue";
import "vant/lib/index.css";
Vue.use(Vant);
export default {
  name: "Item",
  data: function () {
    return {
      id: 0,
      itemObj: {},
      itemlist: [],
      reqi: [],
    };
  },
  components: {
    Header1,
    Header2,
  },
  mounted() {
    this.id = this.$route.params.id;
    axios
      .get(
        "/api/mtrade/mmdb/movie/v5/" +
          this.id +
          ".json?optimus_uuid=01897B9016E211ECAEE8095897369734C05BB838D86B4A49BCA364C679163512&optimus_risk_level=71&optimus_code=10"
      )
      .then((res) => {
        console.log(res);
        var data = res.data.data.movie;
        data.img = data.img.replace("w.h", "148.208");
        this.itemObj = data;
      });

    axios
      .get(
        "/api/mtrade/mmcs/show/v1/movie/showdays.json?movieId=1356063&channelId=4&cityId=30"
      )
      .then((res) => {
        console.log(res);
        this.reqi = res.data.data.dates;
        this.getCinemaArr(this.reqi[0].date);
      });
  },
  methods: {
    getCinemaArr: function (date) {
      axios
        .get(
          "/api/mtrade/mmcs/cinema/v1/select/movie/cinemas.json?limit=20&offset=0&utm_term=7.5&client=iphone&channelId=4&areaId=-1&brandId=-1&districtId=-1&hallType=-1&lineId=-1&movieId=1356063&serviceId=-1&stationId=-1&showDate=" +
            date +
            "&cityId=30&ci=30"
        )
        .then((res) => {
          console.log(res);
          var data = res.data.data;
          // console.log(data);
          var th = data.cinemas;

          this.itemlist = th;
        });
    },
    getData: function (name, title) {
      console.log(name, title);
      this.getCinemaArr(this.reqi[name].data);
    },
  },

  filters: {
    format(value) {
      var arr = value.split("-");
      console.log(arr);
      var str = "";
      var jintian = ["今天", "明天", "后天"];

      var d1 = new Date(value);

      var dd = new Date();
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();

      var d2 = new Date(y + "-" + m + "-" + d);
      var iday = parseInt(parseInt(d1 - d2) / 1000 / 60 / 60 / 24);
      if (jintian[iday] != undefined) {
        str = jintian[iday];
      } else {
        str = `周${"日一二三四五六".charAt(d1.getDay())}`;
      }
      return (str += `${arr[1]}月${arr[2]}日`);
    },
  },
};
</script>
<style scoped>
.adiv {
  /* float: left; */
  margin-left: 20px;
  /* margin-top: 10px; */
}
img {
  margin-top: auto;
  float: left;
  width: 110px;
  height: 150px;
  margin-top: 10px;
}
.ali ul li {
  width: 220px;
  margin-top: 7px;
  margin-left: 10px;
  font-size: 15px;
  float: left;
  color: white;
  /* border:1px solid red; */
}
.ali ul li:first-child {
  font-weight: bolder;
  font-size: 20px;
}
.mask {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 190px;
  background-color: #333;
}

.ali ul li:nth-child(3) span:nth-child(1) {
  color: orange;
  font-weight: bolder;

  font-size: 16px;
}
.type-img {
  position: relative;
  top: 5px;
  /* border: 1px solid red; */
  display: inline-block;
  margin-left: 5px;
  width: 42px;
  height: 13px;
  vertical-align: top;
  opacity: 0.85;
}
.icon-bg {
  width: 26px;
  background: url();
  background-size: 100% 100%;
  display: block;
  height: 100%;
}
.movie-detail-arrow {
  position: absolute;
  width: 10px;
  height: 14.6px;
  right: 15px;
  top: 210px;
  /* -webkit-transform: translateY(-50%); */
  transform: translateY(-50%);
}
.arrow-bg {
  display: block;
  width: 100%;
  height: 100%;
  background: url();
  background-size: cover;
}
.cont {
  float: left;
  position: relative;
}

.mb-line-b {
  width: 370px;
  height: 140px;
  margin-left: 5px;
  /* margin-top: 10px; */
  border: 1px solid #ccc;
  border-left: none;
  border-right: none;
}
.mb-line-b div {
  /* width: 100%; */
  margin-top: 10px;
}
.mb-line-b div:nth-child(1) {
  margin-top: auto;
}
.line-ellipsis span {
  font-size: 14px;
  font-weight: bold;
  font-weight: bolder;
  color: black;
}
.price-block {
  float: right;
  /* border: 1px solid red; */
  /* position: relative; */
  /* left: 30px; */
  /* right: 0; */
}
.price-block span {
  color: red;
}
.price-block span:nth-child(2) {
  font-size: 12px;
  color: red;
}
.line-ellipsis {
  width: 90%;
  overflow: hidden;
  /* font-size: 15px; */
  white-space: nowrap;
  text-overflow: ellipsis;
  color: black;
  float: left;
}
.distance {
  width: 50px;
  float: right;
  /* position: relative; */
}
.label-block {
  width: 350px;
  color: #589daf;
  font-size: 12px;
  display: flex;
  /* border: 1px solid red; */
}
.label-block div {
  margin-left:10px;

  /* font-size: 10px; */
  float: left;
  text-align: center;
}
.label-block div:first-child {
  margin-left: 0;
}
.label-block div.snack,
div.vipTag {
  color: #f90;
  text-align: center;
  border: 1px solid #f90;
}
.card img {
  width: 20px;
  height: 20px;
  /* float: left; */
  position: relative;
  bottom: 10px;
}
.discount-block {
  float: left;
  /* border: 1px solid red; */
}
.discount-label-text {
  width: 300px;
  /* float: left; */
  /* padding-top: 10px; */
  margin-left: 25px;
  color: #ccc;
}

.discount-label-text2 {
  float: left;
  /* padding-right: 10px; */
  position: relative;
  /* right: 10px; */
  color: #ccc;
}

.tou {
  width: 100%;
  height: 50px;
  border: 1px solid #ccc;
  position: relative;
  /* top: 55px; */
  text-align: center;
  display: flex;
  line-height: 50px;
  font-size: 15px;
}
.quancheng {
  width: 33.2%;
  border-right: 1px solid orange;
}
.quancheng:last-child {
  border-right: none;
}
.tou {
  border-left: none;
  border-right: none;
}
.quancheng span {
  display: inline-block;
  position: absolute;
  top: 25px;
  width: 0;
  height: 0;
  margin-left: 4px;
  border: 4px solid transparent;
  border-top-color: #b0b0b0;
}

.bop {
  width: 100%;
  height: 180px;
}
</style>